<template>
    <div>

        <van-nav-bar title="标题" />

        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in list" :key="image">
                <img :src="image.image_src" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe>

        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in title" :key="i">
                <van-image
                    :src="v.image_src ? v.image_src : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
            </van-grid-item>
        </van-grid>

        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(v, i) in imgs" :key="i">
                <lazy-component>
                    <van-image
                        :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" 
                        v-lazy="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                        />
                </lazy-component>
                <div>{{ v.goods_name }}</div>
            </van-grid-item>
        </van-grid>




    </div>
</template>

<script setup>
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
import { ref } from 'vue';
// 轮播图组件
let list = ref([])
const getlist = () => {
    swiperdataApi().then(res => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()

// nav导航组件
let title = ref([])
const gettitle = () => {
    catitemsApi().then(res => {
        console.log(res);
        title.value = res.data.message
    })
}
gettitle()

// 商品列表
let imgs = ref([])
const getimgs = () => {
    searchApi().then(res => {
        console.log(res);
        imgs.value = res.data.message.goods
    })
}
getimgs()
</script>

<style lang="scss" scoped></style>